import { Select } from 'antd';
import React from 'react';
import alltags from './test/data/alltags.json';

const App = () => (
	<Select
		showSearch
		size="large"
		listItemHeight={10}
		listHeight={250}
		style={{
			width: 200
		}}
        suffixIcon={''}
		placeholder="Search to Select"
		optionFilterProp="value"
		filterOption={(input, option) =>
			(option?.value.toLowerCase() ?? '').includes(input.toLowerCase())
		}
		filterSort={(optionA, optionB) =>
			(optionA?.value ?? '').toLowerCase().localeCompare((optionB?.value ?? '').toLowerCase())
		}
		virtual={false}
		options={alltags.map((items, index) => {
			return {
				value: `${items.tagName}|${items.tagId}|${items.tagType}`,
				label: `${items.tagName}|${items.tagId}|${items.tagType}`,
				key: index,
				tagType: items.tagType,
				tagId: items.tagId,
				tagName: items.tagName
			};
		})}
		onSelect={(item, option) => {
			console.log(option);
			console.log(item);
		}}
	/>
);
export default App;
// [
//     {
//         value: 'BOOL1',
//         label: (
//             <div id="88233" tagType="2">
//                 BOOL1
//             </div>
//         )
//     },
//     {
//         value: 'DOUBLE',
//         label: (
//             <div id="88255" tagType="1">
//                 DOUBLE
//             </div>
//         )
//     },
//     {
//         value: 'Float_DCBA',
//         label: (
//             <div id="88216" tagType="1">
//                 Float_DCBA
//             </div>
//         )
//     },
//     {
//         value: 'INT32',
//         label: (
//             <div id="88250" tagType="1">
//                 INT32
//             </div>
//         )
//     },
//     {
//         value: '060PM 9080B1',
//         label: (
//             <div id="87851" tagType="2">
//                 060PM 9080B1
//             </div>
//         )
//     },
//     {
//         value: 'D200 SWCT',
//         label: (
//             <div id="87911" tagType="2">
//                 D200 SWCT
//             </div>
//         )
//     }
// ]
